<template>
	<view>
		<view class="detail">

			<view class="title">类型：</view>
			<view class="change">
				<view class="choose">
					<picker :value="index" :range="list" @change="typeChange">
						<view>{{list[index]}}</view>
					</picker>
				</view>
			</view>

			<view class="title">备注：</view>
			<view class="change">
				<input class="choose" type="text" @input="changeNotes">
			</view>

			<view class="title">开始时间：</view>
			<view class="change">
				<view class="choose">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="beginTimeChange">
						<view>{{beginTime}}</view>
					</picker>
				</view>
			</view>

			<view class="title">结束时间：</view>
			<view class="change">
				<view class="choose">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="endTimeChange">
						<view>{{endTime}}</view>
					</picker>
				</view>
			</view>

			<view class="title">审批人：</view>
			<view class="approve">
				<view class="one">
					<text v-for="item in haveChoseName" style="margin-left: 5px;">{{item}}</text>
				</view>
			</view>

			<view class="approve">
				<checkbox-group @change="checkboxChange">
					<label v-for="(item,index) in approveList" :key="index">
						<view class="one">
							<checkbox :value="item.userId" :checked="item.checked" />
							<text>{{item.name}}</text>
						</view>

					</label>
				</checkbox-group>
			</view>

			<view class="send" @click="send">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		socket
	} from '../../../utils/socket.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				notes: "",
				groupName: "",
				userId: "",


				index: 0,
				list: ['事假', '调休', '病假', '加班'],
				approveList: [],
				haveChoseId: [],
				haveChoseName: [],
				date: currentDate,
				beginTime: currentDate,
				endTime: currentDate

			};
		},
		onLoad(e) {
			this.getStaffIdAndName()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			typeChange(e) {
				this.index = e.detail.value;
				console.log(this.list[this.index])
			},
			changeNotes(e) {
				this.notes = e.detail.value
				console.log(this.notes)
			},
			beginTimeChange(e) {
				this.beginTime = e.detail.value
				console.log(this.beginTime)
			},
			endTimeChange(e) {
				this.endTime = e.detail.value
				console.log(this.endTime)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					year = year + 1;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			checkboxChange: function(e) {
				var items = this.approveList,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.userId)) {
						this.$set(item, 'checked', true)
						let i = this.haveChoseId.indexOf(item.userId)
						if (i == -1) {
							this.haveChoseId.push(item.userId)
							this.haveChoseName.push(item.name)
						}
					} else {
						this.$set(item, 'checked', false)
						let i = this.haveChoseId.indexOf(item.userId)
						if (i != -1) {
							this.haveChoseId.splice(i, 1)
							this.haveChoseName.splice(i, 1)
						}
					}
				}
			},
			send() {
				var applicationId = Math.floor(Math.random() * 900000000) + 1;
				uni.request({
					url: getApp().url + 'application/addApplication',
					data: {
						applicationId: applicationId,
						userId: uni.getStorageSync("userId"),
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId,
						type: this.list[this.index],
						notes: this.notes,
						beginTime: new Date(this.beginTime),
						endTime: new Date(this.endTime)
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "POST",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
					},
					fail: (error) => {
						console.log(error);
					}
				})

				uni.request({
					url: getApp().url + 'approve/addApprove',
					data: {
						userId: this.haveChoseId,
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId,
						applicationId: applicationId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						uni.showToast({
							icon: "success",
							title: "提交成功"
						});

						setTimeout(() => {
							uni.navigateBack()
						}, 1000)
					},
					fail: (error) => {
						console.log(error);
					}
				})
			},
			getStaffIdAndName() {
				uni.request({
					url: getApp().url + 'staff/getStaffIdAndName',
					data: {
						enterpriseId: uni.getStorageSync("enterprise").enterpriseId
					},
					header: {
						token: uni.getStorageSync("token")
					},
					method: "GET",
					success: (response) => {
						if (response.data.code == -1) {
							return uni.showToast({
								icon: "error",
								title: response.data.msg
							});
						};
						this.approveList = response.data.data
					},
					fail: (error) => {
						console.log(error);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		margin: 0 5vw;

		.title {
			margin-top: 20px;
			color: #A09D9D;
			line-height: 40px;
		}

		.change {
			height: 40px;

			.choose {
				width: 80vw;
				height: 40px;
				text-align: center;
				line-height: 40px;
				margin: 0 auto;
				box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
			}

		}

		.approve {
			width: 80vw;
			max-height: 30vh;
			margin: 0 auto;
			overflow: scroll;
			box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

			.one {
				margin-left: 5vw;
				margin-top: 2vw;
				margin-bottom: 2vw;
			}
		}


		.send {
			margin-top: 30px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #FFF;
			background-color: #41A863;
		}
	}
</style>